<template>
  <div>
    <Card class="mb10">
      <p slot="title">本页技术点</p>
      <Alert type="success" show-icon>
        <template slot="desc">
          <p>行合并</p>
        </template>
      </Alert>
    </Card>
    <Row class="mt10">
      <h2 class="tc">2018 - 2019 学 年 度 第 一 学 期 期 末 监 考 表 2019年6月20日</h2>
      <h3 class="tc">注意：监考表一经发布不得调换和更改，如有变动请系部自行安排老师！</h3>
      <div style="width:800px;margin:0 auto">
        <Table border :columns="columns" :data="data" ref="table" class="mt10"></Table>
      </div>
    </Row>
  </div>
</template>

<script>
export default {
  name: "table-rowspan",
  data() {
    function addrows(h, htmlArr) {
      var rowsArr = [];
      for (let i = 0; i < htmlArr.length; i++) {
        if (i !== htmlArr.length - 1) {
          rowsArr.push(
            h(
              "div",
              {
                attrs: {
                  class: "rowspan__child rowspan__child--border"
                }
              },
              htmlArr[i]
            )
          );
        } else {
          rowsArr.push(
            h(
              "div",
              {
                attrs: {
                  class: "rowspan__child"
                }
              },
              htmlArr[i]
            )
          );
        }
      }
      return h(
        "div",
        {
          attrs: {
            class: "rowspan__parent"
          }
        },
        rowsArr
      );
    }
    return {
      data: [],
      columns: [
        {
          title: " ",
          key: "className",
          align: "center",
          className: "className",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "2019/6/20",
          key: "course",
          align: "center",
          children: [
            {
              title: "8:30-9:30",
              key: "course1",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "9:45-10:45",
              key: "course2",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "11:00-12:00",
              key: "course3",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "13:30-14:30",
              key: "course4",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getDataList();
    },
    getDataList() {
      this.data = [
        /**
         * 数据格式全部使用数组形式
         * className 为第一列。第一个置空，第二个起为班级名称
         * course1 为第二列 第一个数据为科目 ，第二个为老师姓名
         * course2 为第三列 第一个数据为科目 ，第二个为老师姓名
         * course3 ... 为其他列
         */
        {
          className: [" ", "16级电商"],
          course1: ["图形图像处理（电商实训室）", "王蕊"],
          course2: ["网页制作（机房）", "张菁屏"],
          course3: ['', ''],
          course4: ['', ''],
        },
        {
          className: [" ", "16级会计"],
          course1: ["结算与汇兑", "刘怡临"],
          course2: ['', ''],
          course3: ['', ''],
          course4: ['', ''],
        },
        {
          className: [" ", "16级轨道1", "16级轨道2", "16级轨道3", "16级轨道4"],
          course1: ["英语口语（开卷）", "董晓净", "杨洋", "柴晓薇", "潘瑾"],
          course2: ["综合实训", "李昀峰", "董晓净", "王育京", "张大伟"],
          course3: ['', '', ' ', ' ', ' '],
          course4: ['', '', ' ', ' ', ' '],
        },
        {
          className: [" ", "16级民航1", "16级民航2", "16级民航3"],
          course1: ["航空服务英语综合", "董晓净", "杨洋", "柴晓薇"],
          course2: ["民航货物运输实务", "李昀峰", "董晓净", "王育京"],
          course3: ["民航服务心理学", "李昀峰", "董晓净", "王育京"],
          course4: ["航空市场营销", "李昀峰", "董晓净", "王育京"],
        }
      ];
    }
  }
};
</script>
<style lang="less">
.rowspan__parent {
  margin: 0 -20px;
}

.rowspan__child {
  padding: 5px 10px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rowspan__child:nth-child(1) {
  color: #f00;
  font-weight: bold;
  font-size: 14px;
}
.className .rowspan__child:nth-child(1) {
  color: #333;
}
.rowspan__child--border {
  border-color: #e8eaec;
  border-style: solid;
  border-width: 0 0 1px 0;
  width: 100%;
}
</style>
